<!-- 流程静态图 -->
<template>
  <div>
    <el-image :src="imageContent" fit="fit">
      <template #error>
        <i v-if="modelId" class="el-icon-picture-outline">{{'加载流程图：'+modelId}}</i>
        <i v-else class="el-icon-picture-outline">{{'加载流程图：'+deploymentId}}</i>
      </template>
    </el-image>
  </div>
</template>

<script>
import { showFlowStaticImg } from "./api";

export default {
  name: "WfStaticImage",
  data() {
    return {
      //图片流
      imageContent: "",
    }
  },
  props: {
    modelId: {
      required: true,
      type: String,
    },
    deploymentId: {
      required: false,
      type: String,
      default: undefined
    }
  },
  watch: {
    modelId(newVal, oldVal) {
      // 更新流程图，存在新的值且发生改变
      if (newVal) {
        console.log("newVal", newVal);
        console.log("oldVal", oldVal);
        if (newVal != oldVal) {
          this.doShowFlowStaticImg();
        }
      } else {
        this.imageContent = "";
      }
    },
    deploymentId(newVal, oldVal) {
      // 更新流程图，存在新的值且发生改变
      if (newVal) {
        console.log("newVal", newVal);
        console.log("oldVal", oldVal);
        if (newVal != oldVal) {
          this.doShowFlowStaticImg();
        }
      } else {
        this.imageContent = "";
      }
    }
  },
  created() {
    if (this.modelId) {
      console.log("created", this.modelId);
    }
    if (this.deploymentId) {
      console.log("created", this.deploymentId);
    }
    //初始化显示图片
    if (this.modelId || this.deploymentId) {
      this.doShowFlowStaticImg();
    }
  },
  methods: {
    // 执行显示图片请求
    doShowFlowStaticImg: function () {
      if (this.modelId) {
        console.log("doShowFlowStaticImg", this.modelId);
      }
      if (this.deploymentId) {
        console.log("doShowFlowStaticImg", this.deploymentId);
      }
      showFlowStaticImg(this.modelId, this.deploymentId).then((response) => {
        //图片二进制流转base
        this.imageContent =
          "data:image/png;base64," +
          btoa(
            new Uint8Array(response).reduce(
              (data, byte) => data + String.fromCharCode(byte),
              ""
            )
          );
      });
    },
  }
}
</script>

<style lang="scss" scoped>
</style>